import classNames from 'classnames';
import React from 'react';

export interface AsideProps {
    width?: string
    children?: React.ReactNode
    className?: string
    style?: React.CSSProperties
}

const Aside: React.FC<AsideProps> = (props) => {
    let { width, children, style, className } = props;

    const styles = {
        ...{ "--yulang-aside-width--": width },
        ...style
    }

    const classes = classNames(className, "yulang-aside-container")
    return (
        <div
            className={classes}
            style={styles}
        >
            {children}
        </div>
    );
};

Aside.defaultProps = {
    width: "300px",
};

Aside.displayName = 'Aside'

export default Aside;
